<style>
    .highcharts-axis-resizer {
        stroke: #eee;
    }

    .highcharts-axis-resizer:hover {
        stroke: #ccc;
    }
</style>
<div id="container" style="min-width:400px;height:600px">图表加载中...</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/highstock.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript" src="js/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="js/drag-panes.js"></script>
<script type="text/javascript" src="js/indicators.js"></script>
<script type="text/javascript" src="js/volume-by-price.js"></script>
<script type="text/javascript" src="js/dark-unica.js"></script>
<script>
    var host='http://localhost:5000';
    Highcharts.setOptions({
        lang: {
            rangeSelectorZoom: ''
        }
    });
    $.getJSON('/data?code=000005.SZ', function (data) {
        if (data.code !== 1) {
            alert('读取股票数据失败！');
            return false;
        }
        buy = data.trade.buy;
        sell = data.trade.sell;
        data = data.data;

        var ohlc = [],
            volume = [],
            dataLength = data.length,
            // set the allowed units for data grouping
            groupingUnits = [[
                'week',                         // unit name
                [1]                             // allowed multiples
            ], [
                'month',
                [1, 2, 3, 4, 6]
            ]],
            i = 0;
        for (i; i < dataLength; i += 1) {
            ohlc.push([
                data[i][0], // the date
                data[i][1], // open
                data[i][2], // high
                data[i][3], // low
                data[i][4] // close
            ]);
            volume.push([
                data[i][0], // the date
                data[i][5] // the volume
            ]);
        }
        // create the chart
        var chart = Highcharts.stockChart('container', {
            chart: {
                zoomType: "x" //放大什么坐标上的数据 可以是x、y、xy
            },
            // zoomType:"xy",
            rangeSelector: {
                selected: 1,
                inputDateFormat: '%Y-%m-%d'
            },
            title: {
                text: '平安银行历史股价'
            },
            xAxis: {
                dateTimeLabelFormats: {
                    millisecond: '%H:%M:%S.%L',
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%m-%d',
                    week: '%m-%d',
                    month: '%y-%m',
                    year: '%Y'
                }
            },
            tooltip: {
                split: false,
                shared: true,
            },
            yAxis: [{
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: '股价'
                },
                height: '100%',
                resize: {
                    enabled: true
                },
                lineWidth: 2
            }, {
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: '成交量'
                },
                top: '65%',
                height: '35%',
                offset: 0,
                lineWidth: 2
            }],
            series: [{
                type: 'candlestick',
                name: '平安银行',
                color: 'green',
                lineColor: 'green',
                upColor: 'red',
                upLineColor: 'red',
                tooltip: {},
                navigatorOptions: {
                    color: Highcharts.getOptions().colors[0]
                },
                data: ohlc,
                dataGrouping: {
                    units: groupingUnits
                },
                id: 'kline'
            }, {
                type: 'column',
                name: '成交量',
                data: volume,
                yAxis: 1,
                dataGrouping: {
                    units: groupingUnits
                }
            }, {
                type: 'flags',
                data: buy,
                onSeries: 'kline',
                shape: 'circlepin',
                fillColor: "yellow",
                width: 16
            },
                {
                    type: 'flags',
                    data: sell,
                    onSeries: 'kline',
                    shape: 'squarepin',
                    color: "white",
                    fillColor: "black",
                    style: { // text style
                        color: 'white'
                    },
                    width: 16
                },
                {
                    type: 'sma',
                    linkedTo: 'kline',
                    zIndex: 1,
                    marker: {
                        enabled: false
                    },
                    params: {
                        period: 10
                    }
                },
                {
                    type: 'sma',
                    linkedTo: 'kline',
                    zIndex: 1,
                    marker: {
                        enabled: false
                    },
                    params: {
                        period: 25
                    }
                }
            ]
        });
    });
</script>